<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <include file="./Public/Admin/header.html" />
    <script type="text/javascript" src="__PUBLIC__js/jquery_wookmark_min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/masonry.pkgd.min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/jquery_imagesloaded.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/jquery.pagination.js?2013-10-15-2"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__css/emotion.css?2013-10-15-2" media="all" />
    <script type="text/javascript" src="__PUBLIC__js/emotion.js?2013-10-15-2"></script>

</head>
<body>
<div id="main">
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div class="box">
                    <div class="box-title">
                        <div class="span10">
                            <h3><i class="icon-edit"></i><?php echo $rtype=='first'?'关注时自动回复内容':'默认回复内容'?></h3>
                        </div>
                    </div>

                    <div class="box-content">
                        <div class="alert">
                            <strong>温馨提示：</strong><br />
                            <?php if($rtype=='first'):?>
                            1. <strong>关注时回复</strong>为用户首次关注时系统回复的消息。
                            <?php endif;?>
                            <?php if($rtype=='default'):?>
                            1. <strong>默认回复</strong>为用户在向系统发送信息时，系统找到不所匹配的关键字时所回复的消息。
                            <?php endif;?>
                        </div>
                        <div class="row-fluid">
                            <div class="span12 control-group">
                                <div class="span4">
                                    <a class="btn " href="javascript:selcontents();"><i class="icon-plus"></i>选择回复素材</a>

                                </div>

                            </div>

                        </div>

                        <form action="/" method="post" class="form-horizontal form-validate">
                            <div class="alert" style="display:<?php echo isset($info)?'none':''?>">
                                <strong>自动回复内容现在为空，请选择回复素材!</strong>
                            </div>
                            <if condition="$count gt 0">

                            <div class="control-group hide" id="textreply">
                                <label class="control-label" for="reply"></label>
                                <div class="controls">
                                </div>
                            </div>
                                <?php if($info['wechat_contents']['contenttype']=='text'):?>
                            <div class="imgEdit" id="imgEdit">
                                <div  id="item_0">
                                    <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                    <div class="des" style=""><?php echo $info['wechat_contents']['content']?></div>
                                </div>
                            </div>
                                <?php endif;?>
                            <?php if($info['wechat_contents']['contenttype']=='news'):?>
                            <?php $item_con=json_decode($info['wechat_contents']['content']);?>
                            <?php if(count($item_con)==1):?>
                            <div class="imgEdit" id="imgEdit">
                                <div  id="item_0">
                                    <div class="caption div_caption" ><?php echo $item_con[0]->detailtitle;?> </div>
                                    <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                    <div class="img">
                                        <div class="coverImg">
                                            <img  src="<?php echo $item_con[0]->detaillogo;?>" />
                                        </div>
                                    </div>
                                    <div class="des"><?php echo $item_con[0]->detailintro;?></div>
                                </div>
                            </div>
                            <?php endif;?>
                            <?php if(count($item_con)>1):?>
                            <div class="imgsEdit" id="imgsEdit">
                                <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                <div class="img" id="item_0">
                                    <div class="coverImg"><img src="<?php echo $item_con[0]->detaillogo;?>"/></div>
                                    <div class="caption" style=" ">
                                        <span  class="div_caption" ><?php echo $item_con[0]->detailtitle;?> </span>
                                    </div>
                                </div>
                                <ul class="unstyled">
                                    <?php for($i=1;$i<count($item_con);$i++){?>
                                    <li class="item">
                                        <div class="caption div_caption"><?php echo $item_con[$i]->detailtitle;?>  </div>
                                        <div class="itemImg coverImg"><img src="<?php echo $item_con[$i]->detaillogo;?>"/></div>
                                        <div class="div_content hide"></div>
                                    </li>
                                    <?php }?>
                                </ul>
                            </div>
                            <?php endif;?>
                            <?php endif;?>




                            </if>

                            <div class="form-actions">
                                <input type="hidden" name="rid" id="rid" value="11090">
                                <input type="hidden" name="rtype" id="rtype" value="1">
                                <button type="submit" class="btn btn-primary hide"  id ="bsubmit">保存</button>

                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<style type="text/css">
    #myModal {
        /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
        width: 900px;
        /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
        margin: 0px 0 0 -450px;
    }
    .con-masonry {
        list-style-type: none;
        margin: 0 auto;
    }
    .con-masonry .item_news {
        width: 350px;
        margin: 5px;
    }
</style>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>    <h3>选择素材</h3>
    </div>
    <div class="modal-body">

        <iframe id='iframe01' style="zoom: 0.6;overflow-x:hidden; display:none;" src="" frameBorder="0" marginheight="0" marginwidth="0" width="99.8%" height="600"></iframe>
        <ul class="nav nav-tabs" id="myTab">
            <li><a href="#replytext" data-toggle="tab" data-type="text">文本素材</a></li>
            <li><a href="#replynews" data-toggle="tab" data-type="news">图文素材</a></li>
        </ul>
        <div class="tab-content dataTables_wrapper">
            <div class="tab-pane  active" id="replytext">
                <div class="con-masonry"  >

                </div>
            </div>
            <div class="tab-pane" id="replynews">
                <div class="con-masonry"  >


                </div>
            </div>
            <div  class="dataTables_paginate paging_full_numbers " id="pagination"></div>
        </div>

    </div>
    <div class="modal-footer hide">
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
    </div>
    <script type="text/javascript">
        Emotion.url='__PUBLIC__img/face/';
        $(function () {
            $('.des').each(function(){
                var c=$(this).html();
                c=Emotion.replaceEmoji(c);
                c=c.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
                $(this).html(c);
            })


            $('#myModal').on('shown', function () {
                // do something…
                get_contents(type,0);
                //getcontent();
            })
        })
        var type='text';
        var isinitpage=true;
        $(function () {
            $('#myTab a:first').tab('show');

            $('a[data-toggle="tab"]').on('shown', function (e) {
                type=$(this).attr('data-type');
                isinitpage=true;
                get_contents(type,0);
                //e.target;
                //alert(e.target); // activated tab
                //e.relatedTarget; // previous tab
            })
        })
        function selcontents(){
            $('#myModal').modal('show');

        }
        function getcontent(){
            $('.con-masonry').masonry({
                // options
                itemSelector : '.item_news',
                columnWidth : 390,//一列的宽度 Integer
                isFitWidth: true,// 适应宽度
                gutterWidth :10,//列的间隙
                isResizableL:false, // 是否可调整大小
                transitionDuration:0,//过渡时间
                isRTL:false//使用从右到左的布局
            });
        }
    </script>
    <script type="text/javascript">
        //加载数据
        function get_contents(type,page){
            page=page+1;
            var opts={type:type,page:page};
            $.get("{:U('Admin/Wechat/selcontent')}?t="+new Date().getTime(),opts,function(data){

                if(isinitpage){
                    initPagination(data.totlecount);
                    isinitpage=false;
                }
                //alert(data.totlecount);
                //载入数据
                if(type=='news'){
                    $('#replynews .con-masonry').empty();
                    $('#replynews .con-masonry').masonry('reload');
                    if(data.totlecount==0){
                        $('#replynews .con-masonry').append('没有图文素材');
                    }
                }else{
                    $('#replytext .con-masonry').empty();
                    $('#replytext .con-masonry').masonry('reload');
                    if(data.totlecount==0){
                        $('#replytext .con-masonry').append('没有文本素材');
                    }
                }
                $.each(data.list,function(index,item){
                    var str='';
                    if(type=='news'){
                        var conitem=eval("("+item.content+")");//内容转换为json对象
                        var len=conitem.length;
                        //单图文
                        if(len==1){
                            str+='<div class="item_news">'
                            +'<div class="imgEdit " id="imgEdit">'
                            +' <div  id="item_0">'
                            +'  <div class="caption div_caption" >'+conitem[0].detailtitle+' </div>'
                            +' <div class="time">'+item.addtime+'</div>'
                            +'<div class="img"><div class="coverImg">'
                            +' <img  src="'+conitem[0].detaillogo+'" />'
                            +'</div></div>'
                            +'<div class="des">'+conitem[0].detailintro+'</div></div>'
                            +'<div class="clearfix">'
                            +'<a class="btn btn-primary selcontent" data-cid="'+item.contentid+'" style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                            +' </div></div></div>';
                        }
                        else {
                            str += '<div class="item_news">'
                            + ' <div class="imgsEdit " id="imgsEdit">'
                            + '                     <div class="time">' + item.addtime + '</div>'
                            + '                    <div class="img" id="item_0">'
                            + '                        <div class="coverImg"><img src="' + conitem[0].detaillogo + '"/></div>'
                            + '                        <div class="caption" style=" ">'
                            + '                            <span  class="div_caption" >' + conitem[0].detailtitle + ' </span>'
                            + '                       </div>'
                            + '                   </div>'
                            + '                   <ul class="unstyled">';
                            for (var i = 1; i < conitem.length; i++) {
                                str += '    <li class="item">'
                                + '       <div class="caption div_caption">' + conitem[i].detailtitle + ' </div>'
                                + '     <div class="itemImg coverImg"><img src="' + conitem[i].detaillogo + '"/></div>'
                                + '     <div class="div_content hide"></div>'
                                + ' </li>';
                            }
                            str += '     </ul> ';
                            str += '<div class="clearfix">'
                            + '<a class="btn btn-primary selcontent" data-cid="' + item.contentid + '"  style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                            + ' </div></div>  </div>';
                        }
                        var $boxes =$(str);
                        $('#replynews .con-masonry').append($boxes).masonry('appended', $boxes, true);
                    }else{
                        var c=Emotion.replaceEmoji(item.content);
                        c=c.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
                        str+='<div class="item_news">'
                        +'                <div class="imgEdit" id="imgEdit">'
                        +'                        <div  id="item_0">'
                        +'                            <div class="time">'+item.addtime+'</div>'
                        +'                            <div class="des" style="">'+c+'</div>   '
                        +' </div> '
                        +'<br /><div class="clearfix">'
                        +'<a class="btn btn-primary selcontent" data-cid="'+item.contentid+'"  style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                        +' </div></div>  </div>';
                        var $boxes =$(str);
                        $('#replytext .con-masonry').append($boxes).masonry('appended', $boxes, true);
                    }
                });
                getcontent();
            },'json');

        }

        function initPagination(num_entries){
            //渲染分页
            $('#pagination').pagination(num_entries, {
                current_page : 0,
                items_per_page : 10,
                num_display_entries : 3,
                callback : function(page_id){
                    //模拟ajax去后端读取页数，获取数据并渲染列表的过程
                    /*$('#list-content').html('');
                     for(var i = 0; i < 10; i++){
                     $('#list-content').append('<tr><td>' + arr[page_id * 10 + i].number + '</td><td>' + arr[page_id * 10 + i]._date + '</td></tr>');
                     }
                    get_contents(type,page_id);*/
                },
                prev_text : '上一页',
                next_text : '下一页'
            });
        }
        $(function () {
            $('.selcontent').live('click',function(){
                var cid=$(this).attr('data-cid');
                var rtype='<?php echo $rtype?>';
                $.post("{:U('Admin/Wechat/setcontent')}",{type:rtype,cid:cid},function(data){
                    if(data.errno==0){
                        G.ui.tips.suc(data.error, data.url);
                    }else{
                        G.ui.tips.err(data.error, data.url);
                    }
                },'json');
            })
        })
    </script>
</div>


</body>
</html>
